<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-product-ranking">
    <view class="tabbar">
      <view
        v-for="item in tabBars"
        :key="item.value"
        class="tabbar-item"
        :class="{active: item.value === sts}"
        @tap="onHandleTab(item.value)"
      >
        <text class="text">
          {{ item.label }}
        </text>
      </view>
    </view>
    <view class="product-ranking-content">
      <product-ranking-table :sts="sts" />
    </view>
  </view>
</template>

<script setup>

const tabBars = [
  {
    label: '支付排行',
    value: 0
  },
  {
    label: '访问排行',
    value: 1
  },
  {
    label: '退款排行',
    value: 2
  }
]
const sts = ref(0)

// 点击导航栏
const onHandleTab = (_sts) => {
  sts.value = _sts
}

</script>

<style lang="scss" scoped>
@import './product-ranking.scss';
</style>
